<template>
  <div class="row justify-content-center">
    <div class="col-8">
      <div v-if="user">
        <h2 class="jh-entity-heading">
          <span v-text="$t('userManagement.detail.title')">User</span> [<strong>{{ user.login }}</strong
          >]
        </h2>
        <dl class="row jh-entity-details">
          <dt><span v-text="$t('userManagement.login')">Login</span></dt>
          <dd>
            <span>{{ user.login }}</span>
            <b-badge variant="success" v-if="user.activated" v-text="$t('userManagement.activated')">Activated</b-badge>
            <b-badge variant="danger" v-if="!user.activated" v-text="$t('userManagement.deactivated')">Deactivated</b-badge>
          </dd>
          <dt><span v-text="$t('userManagement.firstName')">First Name</span></dt>
          <dd>{{ user.firstName }}</dd>
          <dt><span v-text="$t('userManagement.lastName')">Last Name</span></dt>
          <dd>{{ user.lastName }}</dd>
          <dt><span v-text="$t('userManagement.email')">Email</span></dt>
          <dd>{{ user.email }}</dd>
          <dt><span v-text="$t('userManagement.langKey')">Lang Key</span></dt>
          <dd>{{ user.langKey }}</dd>
          <dt><span v-text="$t('userManagement.createdBy')">Created By</span></dt>
          <dd>{{ user.createdBy }}</dd>
          <dt><span v-text="$t('userManagement.createdDate')">Created Date</span></dt>
          <dd>
            <span v-if="user.createdDate">
              {{ $d(Date.parse(user.createdDate), 'long') }}
            </span>
          </dd>
          <dt><span v-text="$t('userManagement.lastModifiedBy')">Last Modified By</span></dt>
          <dd>{{ user.lastModifiedBy }}</dd>
          <dt><span v-text="$t('userManagement.lastModifiedDate')">Last Modified Date</span></dt>
          <dd>
            <span v-if="user.lastModifiedDate">
              {{ $d(Date.parse(user.lastModifiedDate), 'long') }}
            </span>
          </dd>
          <dt><span v-text="$t('userManagement.profiles')">Profiles</span></dt>
          <dd>
            <ul class="list-unstyled">
              <li v-for="authority of user.authorities" :key="authority">
                <b-badge variant="info">{{ authority }}</b-badge>
              </li>
            </ul>
          </dd>
        </dl>
        <router-link custom v-slot="{ navigate }" :to="{ name: 'JhiUser' }">
          <button @click="navigate" class="btn btn-info">
            <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span v-text="$t('entity.action.back')"> Back</span>
          </button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./user-management-view.component.ts"></script>
